<template>
  <view class="flex-col justify-start page">
    <view class="flex-col section">
      <view class="flex-row justify-between items-center input section_2">
        <view class="flex-row items-center space-x-4">
          <image class="shrink-0 image_2" src="../../static/images/d855bde24eef80d4164c236acb00e734.png" />
          <text class="font_1 text_3">请输入产品名称</text>
        </view>
        <text class="font_2 text_4">×</text>
      </view>
      <!-- <view class="flex-row equal-division group_2">
        <view class="flex-col items-center group_3 equal-division-item space-y-6">
          <image class="image_3" src="../../static/images/bcee5206e76bcbbed1af4f89fe356562.png" />
          <text class="font_3">全室智能</text>
        </view>
        <view class="flex-col items-center group_4 equal-division-item space-y-6">
          <image class="image_3" src="../../static/images/a50f5a4bf71a9ca73e3a9bdec1bfc6f1.png" />
          <text class="font_3">动态广场</text>
        </view>
        <view class="flex-col items-center group_4 equal-division-item space-y-6">
          <image class="image_3" src="../../static/images/644a67ab3f1a0ce3d91142cafcbe6882.png" />
          <text class="font_3">功能更新</text>
        </view>
        <view class="flex-col items-center group_4 equal-division-item space-y-6">
          <image class="image_3" src="../../static/images/c7717892578a87208c99aa17fa952954.png" />
          <text class="font_3">发现商城</text>
        </view>
      </view> -->
      <view class="flex-col list space-y-24">
        <view class="flex-col list-item space-y-9" v-for="(item, index) in items" :key="index">
          <view class="flex-row justify-between items-center">
            <text class="font_4">新上线</text>
            <image class="image_4" src="../../static/images/10bc73df596e417f925a417e121e5af0.png" />
          </view>
          <view class="flex-col space-y-9">
            <view class="flex-row items-center section_3 space-x-22">
              <image class="image_5" src="../../static/images/3930616d8878f57f8e3b5d0124b01608.png" />
              <view class="flex-col items-start flex-auto space-y-10">
                <text class="font_4">箱式电阻炉</text>
                <text class="font_5">品牌</text>
              </view>
            </view>
            <view class="flex-row items-center section_3 space-x-22">
              <image class="image_5" src="../../static/images/3930616d8878f57f8e3b5d0124b01608.png" />
              <view class="flex-col items-start flex-auto space-y-10">
                <text class="font_4">箱式电阻炉</text>
                <text class="font_5">品牌</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        items: [null, null],
      };
    },

    methods: {},
  };
</script>

<style scoped lang="css">
/* 整个页面垂直方向上都能铺满屏幕 使用 top、right、bottom、left 属性来控制位置 */
 .page {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #e5e5e54d;
 }

  .pos {
    position: absolute;
    left: 20.83rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  .image {
    width: 62.5rpx;
    height: 62.5rpx;
  }
  .font_2 {
    font-size: 35.42rpx;
    font-family: SourceHanSansCN;
    line-height: 22.92rpx;
    font-weight: 700;
  }
  .text_2 {
    margin-top: 12.5rpx;
    color: #525252;
  }
  .font_1 {
    font-size: 35.42rpx;
    font-family: MiSans;
    line-height: 33.33rpx;
  }
  .text {
    color: #525252;
    line-height: 32.29rpx;
  }
  .input {
    margin-left: 52.08rpx;
    margin-right: 45.83rpx;
  }
  .section_2 {
    padding: 20.83rpx 16.67rpx;
    background-color: #cccccc4d;
	margin-top: 40rpx;
	border-radius: 15rpx;
  }
  .space-x-4 > view:not(:first-child),
  .space-x-4 > text:not(:first-child),
  .space-x-4 > image:not(:first-child) {
    margin-left: 8.33rpx;
  }
  .image_2 {
    width: 52.08rpx;
    height: 52.08rpx;
  }
  .text_3 {
    color: #38383866;
  }
  .text_4 {
    margin-right: 8.33rpx;
    color: #38383880;
  }
  .equal-division {
    margin-top: 16.67rpx;
  }
  .group_2 {
    padding: 0 16.67rpx;
  }
  .group_3 {
    flex: 1 1 180.21rpx;
  }
  .image_3 {
    border-radius: 10.42rpx;
    width: 95.83rpx;
    height: 95.83rpx;
  }
  .font_3 {
    font-size: 25rpx;
    font-family: AlibabaPuHuiTi;
    line-height: 22.92rpx;
    color: #000000;
  }
  .group_4 {
    flex: 1 1 180.21rpx;
    margin-left: 8.33rpx;
  }
  .equal-division-item {
    padding: 8.33rpx 0;
  }
  .space-y-6 > view:not(:first-child),
  .space-y-6 > text:not(:first-child),
  .space-y-6 > image:not(:first-child) {
    margin-top: 12.5rpx;
  }
  .list {
    margin-top: 29.17rpx;
    padding-left: 52.08rpx;
    padding-right: 45.83rpx;
  }
  .space-y-24 > view:not(:first-child),
  .space-y-24 > text:not(:first-child),
  .space-y-24 > image:not(:first-child) {
    margin-top: 50rpx;
  }
  .list-item {
    padding: 20.83rpx 50rpx 62.5rpx 58.33rpx;
    background-color: #ffffff;
    border-radius: 27.08rpx;
  }
  .space-y-9 > view:not(:first-child),
  .space-y-9 > text:not(:first-child),
  .space-y-9 > image:not(:first-child) {
    margin-top: 18.75rpx;
  }
  .font_4 {
    font-size: 25rpx;
    font-family: MiSans;
    line-height: 22.92rpx;
    color: #525252;
  }
  .image_4 {
    width: 50rpx;
    height: 50rpx;
  }
  .section_3 {
    margin-right: 6.25rpx;
    padding: 12.5rpx 25rpx;
    background-color: #e5e5e533;
  }
  .space-x-22 > view:not(:first-child),
  .space-x-22 > text:not(:first-child),
  .space-x-22 > image:not(:first-child) {
    margin-left: 45.83rpx;
  }
  .image_5 {
    width: 64.58rpx;
    height: 81.25rpx;
  }
  .space-y-10 > view:not(:first-child),
  .space-y-10 > text:not(:first-child),
  .space-y-10 > image:not(:first-child) {
    margin-top: 20.83rpx;
  }
  .font_5 {
    font-size: 20.83rpx;
    font-family: MiSans;
    line-height: 19.79rpx;
    color: #a6a6a6;
  }
</style>